Nuevos elementos en el header

Hace tiempo averiguábamos como añadir nuevos elementos de página a nuestra plantilla, más tarde J.Miur daba buena cuenta de las posibilidades del header de Blogger, y visitando a Rosa descubrimos como añadir nuevos elementos en una misma línea y de forma independiente esta vez en el footer.

Un ejemplo es el blog de Pizcos añadiendo en el footer widgets que normalmente añadimos en la sidebar, esta última por ejemplo es una muestra más de lo que se puede conseguir con imaginación y buen gusto.

Y siguiendo con nuestro afán de conseguir añadir nuevos elementos vamos a hacerlo esta vez en lo que llamamos encabezado del blog, después del logo o header.

Para conseguirlo nos debemos situar en nuestra plantilla Edicción de HTML y localizar :
<div id='header-wrapper'> a continuación encontraremos algo así:

<div id='header-wrapper'>   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>  <b:widget id='Header1' locked='true' title='Aquí pondrá el título (cabecera)' type='Header'/>  </b:section>  </div>

Justo después añadiremos lo siguiente:

<div id='header-bloque-conten'><div id='header2' style='width: 30%; float: left; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque1' preferred='yes' style='float:left;'></b:section></div><div id='header3' style='width: 40%; float: left; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque2' preferred='yes' style='float:left;'></b:section></div><div id='header4' style='width: 30%; float: right; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque3' preferred='yes' style='float:left;'></b:section></div><div style='clear:both;'/><div id='header-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'><b:section class='header' id='bloque-bottom' preferred='yes'/></div><div style='clear:both;'/></div>

Una vez añadimos el anterior código nos situamos antes de ]]></b:skin> y añadimos unas líneas de código para personalizar el espacio donde irán nuestros nuevos elementos de página.

#header-bloque-conten{

clear:both;

}

.header-bloque {

margin: 5 auto;

padding: 10px;

text-align: center;

background: #000000;

border:1px solid #288cf0;

}

Donde padding: 10px; es el espacio para separar las columnas que podemos modificar visualizando en vista previa.

margin: 5 auto; es el espacio que dejamos en la parte superior.

En text-align: center; situamos el texto centrado, si deseamos que aparezca a la izquierda sustituimos center por left, y por right si es a la derecha.

Para cambiar el color de fondo lo haremos en background: #000000;
El tipo de borde, grosor y color en border:1px solid #288cf0;

Por último sólo nos queda guardar los cambios, en la plantilla de diseño podremos ver tres elementos independientes en línea horizontal, y en vista previa comprobaremos el siguiente efecto:

Podemos incluir un nuevo elemento añadiendo:

<div id='header5' style='width: 30%; float: right; margin:5; text-align: center;'>
<b:section class='header-bloque' id='bloque4' preferred='yes' style='float:left;'>
</b:section>
</div>

Modificando los valores style='width: 30%; de cada uno de los elementos de forma que la suma de todos no sea superior a 100%